美数课堂已经出了 14 期，但有一个很重要的问题课代表一直有意没讲。
那就是如何选配色。
给数据可视化挑颜色真的是个难题。用 Excel 默认的配色，太千篇一律，自己搭配吧，一不小心就辣眼睛。
在后台，也有同学留言说提想学配色，希望课代表分享一些经验。
今天课代表就给大家分享一篇可视化大神的分享。数据可视化工具 Datawrapper 的主创 Lisa Charlotte Rost 9 月份在 Datawrapper 的博客总结了一份可视化配色避免“踩坑”指南，帮助大家更容易地选出合适的颜色。课代表得到作者授权分享，编译成中文分享大家。（原文请见文末）
文章共 13 章， 5711 字，强烈建议先收藏再阅读！
开始之前...
在接下来的内容里，我会经常提到 HSB 颜色模式（又称 HSV），即色相（ hue ）、饱和度（ saturation ）和明度（ brightness ）。这里先科普一下它是什么：色相（ H ），在一个 0-360° 的标准色轮上，色相是按照角度确定的；
饱和度（ S ），是一个从 0%（灰色）到 100%（艳色）的一个百分值；
亮度（ B ），是一个从 0% （黑色）到 100%（白色）的一个百分值。
⌂ HSB 颜色模式，课代表添加。图片来源：lightcolourvision.org
如果你的颜色是用的 HEX 模式（例如#cc0000）或者 RGB 模式（例如 rgb(207, 176, 58)），你可以用 colorizer.org 之类的工具转换成 HSB 的值。
拓宽你对颜色的理解
给可视化找配色时，你可能会这么想：“我的图表现在需要五种颜色，那就用：红色、橙色、黄色、绿色，还有，嗯…橙色？哦对，粉色！”
如果你小时候涂鸦涂得少，那么这样想情有可原。但今天要说的是：世上的颜色远远不止赤橙黄绿青蓝紫。来看看下面这张图的配色，来和那些基础颜色比较一下：⌂ Why do Cats and Dogs? （https://whydocatsanddogs.com/cats），作者 Nadieh Bremer 。
创作它的 Nadieh 使用的红色 █ 和你熟悉的红色不是同一个红色，绿色 █ 也不是同一个绿色。所以在我们潜入更深的颜色法则之前，让我来唬一唬你：你要在成千上万种配色中为你的可视化作品寻找配色。先说这个红色，它有带着些许黄的红 █ ，有含着蓝的红 █ ，还有处于此二者之间的红 █ 。再来看个灰色 █ ，有冷灰 █ ，有暖灰 █ 。还有蓝色呢！太多了，看看这个 █ ，这个 █ ，这个 █ ，还有这个 █ 和这个 █ 。而我们还没谈到橙色和黄色呢。你真的有太多选择了。这意味着，就算你只选择色轮上的一小块地方，依旧有大量的选择。
不要把色轮上的颜色都用完
给可视化找配色时，没必要用色轮上那么多颜色。实际上，颜色（包括邻近色）用的越少，图表会看起来更专业，可信度也因此会更高。提了那么多次色轮，不如眼见为实。你可以在 Adobe Color 或者 Color Calculator 类似的工具上打开操作。很多色彩工具都会提供各种各样的色彩调和方案（ Color Harmony )，其中有一类叫“矩形配色”（tetradic），在色轮上用矩形的四个顶点取四个色。⌂ 在一款色彩调和工具中使用矩形配色方案（https://www.sessions.edu/color-calculator/），课代表添加。
我们在设计数据可视化时，为了避免颜色过多而导致读者失去视觉重心，一般不建议采用这种矩形配色。
下图中，我就使用矩形配色，但我没有就此打住，而是慢慢地将色相间的距离拉近。怎么样，是不是美观了许多？
当色相间的距离足够近时，你得到的就是互补色（ complementary colors ）。非常推荐这种配色方案。许多出色的作品都使用了互补色。所以，当我们在配色上犹豫不决的时候，选互补色或它们的相邻色就对了！
让我们一起在 Adobe Color 上操作看看：
很明显，我们得到的是一组互补色。但是不是觉得它们不太好用？两种橘色太像了，而且每一种颜色都太亮眼了。说好地选互补色就对了呢？这时候就需要我们的另外两个老朋友了：饱和度（Saturation）和亮度（Lightness）。
色相好不好用，要看饱和度和亮度
事实上，光改变饱和度和亮度，你完全可以创造出新的颜色。下面有两对相同色相的颜色，仅仅是饱和度及亮度有些许差异：█ █ / █ █。我们来再回到开始不好使用的亮瞎眼互补色组合。在调整了饱和度和亮度之后，它们变成了这样：
在这里，我调高了亮蓝和亮橙的饱和度，然后把除了亮橙之外的其他颜色加深。然后这组颜色就能用了！所以，当你觉得选择的色组不那么好看的时候，不要猴急忙慌地加添上一个新色相。调节一下饱和度和亮度，看看改变。
使用暖色和蓝色
其实，有些互补色特别受数据可视化设计师的喜爱，它们是黄色、橙色、红色和蓝色。去看那些出色的数据新闻媒体，看看他们的作品，比如《南华早报》或《经济学人》。你会发现他们使用黄橙红蓝的频率，远超粉色、绿色之类的颜色。⌂ 《经济学人》数据新闻组2018年做的作品（https://medium.economist.com/a-year-in-graphic-detail-d1825b28e06f），课代表添加。黄橙红放在一起，天生就赏心悦目。人们还能将它们分辨出来，这正是作为分类色的好材料。而蓝色比任何一种色相都要灵活多变：很多的蓝色，不论是深蓝浅蓝，还是饱和蓝或者非饱和蓝，看起来都非常舒服、平和且专业。而且它们更容易被接受，色盲可以很容易地分辨蓝色和红（橙）色。当我们在配色上犹豫不决的时候，选红蓝配或橘蓝配就对了。
⌂ 自古红蓝出CP，课代表马上就想到好几对。图片来源于豆瓣。
用绿色时，把它掺成偏黄或偏蓝
森林绿覆盖了一个色轮的 1/6 ：以 120° 为顶峰，从 90° 到 150 °。但有趣的是，你很少会见到绿色为主色调的出色数据可视化作品。为什么会这样？首先，森林绿太深了，而把森林绿调亮的代价是进入有点油腻且尴尬的绿。所以选用森林绿时，需要更大幅度地调节饱和度和亮度，才得到得体的颜色。《华盛顿邮报》就是这样使用绿色的。
⌂ The Washington Post《How Trump is rolling back Obama’s legacy》（https://www.washingtonpost.com/graphics/politics/trump-rolling-back-obama-rules/。）
《华盛顿邮报》使用了一个 142° 的绿，但是只有 14% 的饱和度。其实这和它 █（100%饱和）是同一个色相，同一个明度。饱和度与明亮度的重要性再度可见一斑。再回到文章开头的例子中：所有来自 FiveThirtyEight 的绿色都超过了 160° 的色相（更蓝），或者比 60° 还要低的绿色（更黄）。Nadieh 在她的《Why do Cats and Dogs? 》项目中，兼用了黄绿与蓝绿。⌂ Why do Cats and Dogs? （https://whydocatsanddogs.com/cats），作者 Nadieh Bremer 。
其实你也可以把这些颜色用到你自己的数据可视化作品中，不是吗？
避免使用纯色
纯色指的是色环上，正好位于60°、120°、 180°、 240°、 300°、360°（0°）处的颜色。
举个例子：在 HSB 中，纯浅蓝的色相值是 180° ，虽然饱和度是 67% ，亮度是 91% ，但不影响它当纯色。你也可以参照 RGB 系统：如果有两个及以上参数相同，那其必定为纯色。█ 在RGB中表示为 rgb(77, 232, 232)。为了提升读者的阅读体验，同时让颜色看起来更自然，你可以将纯色的饱和度调低，也可以将亮度调暗。如果你就是想要明亮的饱和的色彩，那就寄希望于色环上离纯色至少5-10°远的混色。上图中，红橙、蓝绿其实具有同样的饱和度和亮度。唯一的不同就是色相：红色 █ ，蓝色 █ ，绿色 █ 作为纯色，确实比橙色 █ ，中等蓝 █ ，蓝绿 █ 等混色要艳一些。
避免明亮饱和的颜色
霓虹色（ Neon Colors ）绝对是吸引注意的首选。但要真用的话，你的读者可不会感谢你。我们大部分人看到此类颜色，在或多或少会有紧张感。Bartram 等人 在他们 2017 年的一篇论文中解释过：“高度饱和，明亮的颜色不适合传递严肃、平静和信任的感情。”如果你的颜色接近 100% 的饱和 100% 的亮度的话，可能就太艳了。而且它们很有可能就是纯色。你可能终于忍不住了，说：“我以前也看过这样的颜色呀，它们看起来超漂亮的，不信你看！”
⌂ New York Times article on music playlists
⌂ Bloomberg article on bankruptcies
⌂ The Pudding article on celebrities
是的。但你如果把图例中的颜色与 █ █ █ █ 对比，你会发现例子中的色彩其实还是相对不饱和，它们更加的暗沉。纯色的100%饱和 100% 亮的 █ 在 New York Times 中成了 █ ，在Bloomberg中成了 █ ，在 The Pudding 中则是 █。这些配色和霓虹灯一样抓住了读者的眼球，同时还对眼睛和心理更加友好。在你成为《纽约时报》、彭博社或 The Pudding 里那样厉害的设计师之前，请避免使用 100% 饱和度或 100% 亮度的颜色。
不同亮度的魔法
有时候我会看到一些图表，尤其是面积图，相邻的元素是同样的亮度。这样做有什么后果呢？你可以把你的配色转换成黑白色调，然后看看（可以通过色盲模拟工具或 Datawrapper colorblind check 来实现）。如果你的颜色看起来都是同样的灰色，那么他们就是同等亮度。这样的配色在潜意识里，会造成乏味且刺眼的视觉体验。
我强烈推荐第一个方法。因为，如此一来颜色本身会更加活跃，而且色盲群体阅读会感激你。（其实你把数据可视化做得好看易懂，大家都会感激你）。
真正操作中，一个非常实用的颜色选择的技巧就是从颜色梯度中选取，如下：
这些颜色梯度从明到暗平稳变化，所以你从中提取的颜色会有不同的亮度。
让你的配色更多彩：相仿性
在你的可视化中，使用颜色大多数情况下都是希望突出主题。这个目的可以有多种不同的实现方式。是因为它们特别深 █ █
是因为它们特别浅 █ █
是因为它们非常饱满 █ █
是因为它们更加的纯 █ █
但是，通常你希望的是让一两种颜色突出即可，剩余颜色吸引的注意力应该相近。
如果你使用的颜色仅仅是亮度不同（同前例中，我们聊到的“改变区域明暗度”），在突出个体颜色时，可以再试图平衡一下：把明亮的颜色去饱和；给暗沉的颜色加饱和。或者选择一种不太纯的色相：上图中的绿 █ 和蓝 █ 是本来是很纯的，我就把它们再调暗一点。（要是调成100%亮度就是这样：█ █ ）我接着又想把红色加进来，但是红色的亮度会过于强烈（色相为0°）：█ █ █ ，那我有两条路：
主体与背景的视觉对比避免过小
奇怪的是，大量的带有明亮背景的图表都喜欢使用彩色铅笔一般的颜色。这些颜色大都不是很饱和，而且还有很糟心的亮。那么问题就来了：如果你设计时，遇到的是小面积视觉元素（如点，线），明亮且非饱和的颜色们对你的读者来说是很难分辨的。就算辨识度不是问题（在大面积视觉元素时），你的数据可视化作品还是应该创造足够的与背景图的视觉对比，这样的图表会显得很自信：“嘿，我才是数据，往这儿看！“当你的颜色实在是不饱和且太亮的时候 █ █ █ ，我有这些方法：增大饱和度：█ █ █
调低亮度：█ █ █
或者同时调节二者：█ █ █
当然了，这有一部分是要依靠个人审美的。但你要是不确定你的颜色是否已太像彩色铅笔时，可以试试以上方法。自己找找感觉，会越做越好的。
避免主体与背景的过大视觉对比
上面那句话反过来也对：可视化主体不要和背景对比太强烈。在使用偏亮的背景时，不要把你的颜色弄得太黑太饱和。不确定的时候，可以试试把你的颜色调轻一点，饱和度调低一点然后看看是什么感觉。
选择一个不够饱和的背景
一旦你上手了配色，丰富多彩的背景或许会成为你作品的常客。但是，此类背景大都有两类缺陷：事实上，你的背景越饱和，你的色彩困境就越多。所以不饱和的颜色是你的好朋友。以下是一些在使用 HSB 色域的黄金准则：
复制/粘贴颜色或者干脆就去理解它们
选择好的颜色是很困难的。所以真的不要为你对颜色把控不住而担心。复制（借鉴）他人作品中好的色板是没有问题的。我另外又写了 一篇文章教你如何从颜色中获取灵感：从电影、艺术家、别人收集的色盘等等，尤其是从其他人的数据可视化作品中。（ https://blog.datawrapper.de/colorguide/ ）如果你确实想要建立好的颜色表情达意。那就分析它们吧，你可以试试以下方法：
⌂ Photo by niko photos on Unsplash
选一个你认为好看的图，什么照片、艺术品都行。然后通过取色器（ Photoshop 或者 image-color.com 之类）从中提取颜色。试试把这些颜色应用在你下次的数据可视化作品中
装一个 Adobe Capture ：你可以用它在你的日常生活中取色（当你发现生活中有如此多的不饱和色时，真的相当有趣）
试一试“手动取色”：看看你的屏幕，看到哪些颜色了？它们又多暗，多饱和呢？在你身边，又有哪些颜色是互补色呢？
从出色的数据可视化作品中，借鉴颜色。你可以用我们今天教的规则改一改，看看是不是还在你的作品中同样适用？
如果你下次设计可视化的时候，还是对自己的配色不满意，不如把它们放在 HSB 中分析一番（工具有很多，如 colorizer.org ）：随着时间推移，你对颜色的理解就会从“哇，这个真好看，但我不知道怎么搞”升级成“这个颜色很美观，因为它在互补色的饱和度上……”。并且，你会更加自由地打破今天讲的所有规则，但依旧可以创造出出色的数据可视化。编译略有删改，原文链接：https://blog.datawrapper.de/beautifulcolors/
◒◡◒
┊推 - 荐 - 阅 - 读┊